<template>
  <div>
    <span id="myspan">订单列表</span>
    <el-table :data="pg.rows.filter(data => !search
      || data.userId.phone.includes(search)
      || data.commodityId.commodityName.includes(search)
         )" style="width: 100%">
      <el-table-column label="订单编号" prop="_id"></el-table-column>
      <el-table-column width="120" label="买家联系方式" prop="userId.phone"></el-table-column>
      <el-table-column width="110" label="商品名称" prop="commodityId.commodityName"></el-table-column>
      <el-table-column width="80" label="商品数量" prop="numbers"></el-table-column>
      <el-table-column width="110" label="商品总价" prop="totalPrices"></el-table-column>
      <el-table-column width="110" label="买家实付款" prop="actualPayment"></el-table-column>
      <el-table-column width="110" label="订单创建时间" prop="orderTime"></el-table-column>
      <el-table-column width="80" label="实付款" prop="actualPayment"></el-table-column>
      <!-- <el-table-column width="80" label="订单状态" prop="bool"></el-table-column> -->
      <el-table-column id="btns" align="right">
        <template slot="header" >
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template scope="scope">
          <el-button size="mini" type="primary" @click="change(scope.row)">修改</el-button>
          <el-button size="mini" type="info" @click="deleteOne(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-button-group>
      <el-button type="primary" @click="firstPage">首页</el-button>
      <el-button type="primary" @click="prePage" icon="el-icon-arrow-left">上一页</el-button>
      <!-- <el-button type="text">共有{{this.pg.pages}}页</el-button>
      <el-button type="text">当前为：第{{this.pg.currentPage}}页</el-button> -->
      <el-button type="primary" @click="nextPage">
        下一页
        <i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
      <el-button type="primary" @click="lastPage">尾页</el-button>
    </el-button-group>
  </div>
</template>

<script>
import axios from "axios";
import { log } from "util";
export default {
  created() {
    this.getOrders();
  },
  data() {
    return {
      pg: {
        currentPage: 1, //默认第一页
        pageSize: 6, //默认一页显示6条数据
        total: 0, //保存共有多少条数据
        rows: [], //保存传回来的所有数据
        pages: 1, //最大页
        //shopId:'' //保存当前登录商家绑定的shopId
        //shopId:'5ecf776782060000b8004fc2' //保存当前登录商家绑定的shopId
      },
      search: "", //右上角搜
    }; 
  },
  methods: {
    async getOrders() {
      let { data } = await axios.get("/orders/getOrders", {
        params: { currentPage: this.pg.currentPage, 
                  pageSize: this.pg.pageSize,
                   merchantId:this.merchantId }
                  //merchantId:'5ecdd5f0933400001e003296' } 
      });            
      this.pg = data;
    },
    //首页
    firstPage() {
      this.pg.currentPage = 1;
      this.getOrders();
    },
    //尾页
    lastPage() {
      this.pg.currentPage = Math.ceil(this.pg.total / this.pg.pageSize);
      //console.log(this.pg.currentPage);
      this.getOrders();
    },
    //上一页
    prePage() {
      if (this.pg.currentPage > 1) {
        this.pg.currentPage--;
        this.getOrders();
      }
    },
    //下一页
    nextPage() {
      let maxPage = Math.ceil(this.pg.total / this.pg.pageSize);
      if (this.pg.currentPage < maxPage) {
        this.pg.currentPage++;
        this.getOrders();
      }
    },
    //点击修改跳转修改页面
    change(param) {
      this.$router.push(`/admin/index/updateOrders/${param._id}`);
    },
    //删除一条数据
    async deleteOne(param) {
      let isDel = confirm("确认删除嘛？");
      if (isDel) {
        let _id = param._id;
        let { data } = await axios.post("/orders/deleteOrders", { _id });
        if (data) {
          this.getOrders();
        }
      }
    }
  }
};
</script>
<style scoped>
#myspan {
  margin-left: 0;
  font-weight: bold;
}
.el-button-group .el-button {
  margin-left: 5px;
}
.el-button-group .el-button:nth-child(3) {
  margin-left: 10px;
}
.el-button-group .el-button:nth-child(4) {
  margin-left: 10px;
}
</style>